/**
* LiteAdmin
* LiteAdmin is committed to providing solutions for quickly building web applications
* Please view the LICENSE file that was distributed with this source code,
* For the full copyright and license information.
* Thank you very much for using LiteAdmin.
*
* @Author Dengje
* @Link   https://gitee.com/dengje/LiteAdmin
*/
<template>
  <div>
    <el-row :gutter="20">
      <el-col :md="10" :xs="24">
        <div class="wellcome">
           <div>
            <div class="title"> 🎉欢迎来到LiteAdmin</div>
            <div>更多信息请访问网站</div>
            <a href="https://www.yuque.com/dengje/sbtlrc" class="docurl">https://www.yuque.com/dengje/sbtlrc</a>
            <div class="intro">
                一款基于ThinkPHP+Vue3+ElementPlus的后台管理框架，封装CRUD、FORM组件让开发更高效
            </div>
           </div>
            <img class="img" src="@/assets/images/engineer.svg" alt="">
        </div>
        <div class="box">
            <simple></simple>
        </div>
    </el-col>
      <el-col :span="14">
        <div class="composer-box">
            <div class="header">Header</div>
            <div class="intro">
                Get individual modification of this product or exclusive custom designs created up to your wishes
            </div>
            <div>
                <img class="img" src="https://modernize-vuejs.adminmart.com/assets/profilebg-63142db0.jpg" alt="">
                <div>
                    <div>ss</div>
                    <div>sw</div>
                </div>
            </div>
            
      </div></el-col>
    </el-row>

    
  </div>
</template>
   
  <script>
import { ref, onMounted } from "vue";
import simple from './simple.vue'
import simple2 from './simple2.vue'
onMounted(() => {});
export default {
    components:{
        simple,
        simple2,
    },
  data() {},
  methods: {
    main() {},
  },
  mounted() {
    this.main();
  },
};
</script>
   
  <style lang="scss">
  .other{
    background-color: var(--el-color-primary);
  color:#fff;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  height: 235px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  }
.wellcome {
  background-color: var(--el-bg-color);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
//   height: 250px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title{
    font-size: 30px;
  }
  .docurl{
    background-color: #eee;
    border-radius: 20px;
  }
  .intro{
    margin-top: 30px;
    font-size: 15px;
    width: 360px;
  }
  .img{
    width: 150px;
    height: 150px;
  }
}


.composer-box{
    background-color: var(--el-bg-color);
  color:#fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;

//   display: flex;
//   justify-content: space-between;
//   align-items: center;
    .header{
        color:#232323;
        font-weight: bold;
        margin-bottom: 15px;
    }
    .intro{
        color:#999;
        font-size: 20px;
        width: 60%;
        margin-bottom: 15px;
    }
    .img{
        width: 500px;
        height: 300px;
        border-radius: 8px;
    }
}
</style>

